<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<style>
    .tb {
        width: 400px;
        margin: auto;
    }

    .submit {
        width: 170px;
        height: 40px;
        cursor: pointer;
    }

    .error {

        width: 200px;
        height: 60px;
        position: absolute;
        left: 650px;
        top: 200px;
    }

    .close {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 820px;
        top: 160px;
        font-size: 18px;
        color: black;
        cursor: pointer;
    }

    .td1, .td2 {
        color: red;
    }

    .span {
        color: red;
        font-size: 18px;
    }
</style>
<body>

<table class="tb">
    <tr>
        <td>用户名:</td>
        <td><input type="text" class="username" name="username"></td>
        <td class="td1"></td>
    </tr>
    <tr>
        <td>密码:</td>
        <td><input type="password" class="password" name="password"></td>
        <td class="td1"></td>
    </tr>
    <tr>
        <td>验证码:</td>
        <td><input type="text" name="checkCode" id="checkCode"></td>
        <td class="td2"></td>
    </tr>
    <tr>
        <td></td>
        <td><img src="http://localhost:8080/Book_Web/checkCode" class="checkCode"></td>
        <td><a href="javascript:void(0)" class="checkCode">看不清换一张?</a></td>
    </tr>
    <tr>
        <td></td>
        <td colspan="2">
            <button class="submit">提交</button>
        </td>
    </tr>
</table>
<div class="box">
    <div class="close">
        <h3>×</h3>
    </div>
    <div class="error">

    </div>
</div>
</body>
<script>
    $(".close").click(function () {
        $(".box").remove()
    });
    $.ajax({
        url: "loginErrorServlet",
        type: "post",
        success: function (s) {
            let str = "<span class='span'>" + s + "</span>";
            $(".error").append(str)
        }
    })

    //刷新验证码
    function CheckCode() {
        let date = new Date();
        let str = "http://localhost:8080/Book_Web/checkCode?" + date;
        $(".checkCode").attr("src", str);
    }

    $(".checkCode").click(function () {
        CheckCode()
    });
    $(".submit").click(function () {
        let username = $(".username").val();
        let password = $(".password").val();
        let checkCode = $("#checkCode").val()
        $.ajax({
            url: "loginServlet",
            type: "post",
            data: "username=" + username + "&password=" + password + "&checkCode=" + checkCode + "",
            success: function (s) {
                $(".td1").html(s.user_Error);
                $(".td2").html(s.checkCode_Error);
                CheckCode()
                if (s.jump === "1") {
                    window.location.href = "User.html"
                } else if (s.jump === "2") {
                    window.location.href = "Manager.html"
                }
            }
        })
    });
</script>
</html>